import React from 'react';
import axios from 'axios';
import NewFlow from './newFlow';
import SelectHost from './selectHost';
import Charts from './charts';
import FlowTotalInfo from './flowTotal';
import FailFlowServer from './failFlowServe';

import './index.css';

class GateWay extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      appChart: {},
      flowInfo: [],
      failServer: {},
      totalInfo: [],
      hostId: -1,
      failFlow: [],
      flowTrend: {},
      newFlowData: []
    };
    this.timer = null;
  }

  componentDidMount() {
    this.fetchAllData();
    this.timer = setTimeout(() => {
      this.fetchAllData();
    }, 3000);
  }

  componentWillUnmount() {
    clearTimeout(this.timer);
  }

  fetchAllData = () => {
    this.getFailFlow();
    this.getAppData();
    this.getFailServe();
    this.getFlowTrend();
    this.getFlowInfoTotal();
    this.getNewFlowData();
  };

  getFlowTrend = () => {
    const { hostId } = this.state;
    axios.get(`/aiOps/gateway/flow?dockateId=${hostId}`).then((res) => {
      const { data } = res.data || {};
      const flowTrend = data || {};
      flowTrend.series = [];
      if (data && data.axis && data.axis.length) {
        data.axis.forEach((item) => {
          flowTrend.series.push({
            name: item.appName,
            data: item.y,
            type: 'line',
            smooth: true
          });
        });
      }
      this.setState({ flowTrend });
    }).catch((err) => {
      console.log(err);
    });
  };

  getAppData = () => {
    const { hostId } = this.state;
    axios.get(`/aiOps/gateway/access/?dockateId=${hostId}`).then((res) => {
      const { data = {} } = res.data || {};
      this.setState({ appChart: { x: data.x, y: data.y } });
    }).catch((err) => {
    });
  };

  getFailFlow = () => {
    const { hostId } = this.state;
    axios.get(`/aiOps/gateway/failService?page=${1}&size=${100}&dockateId=${hostId}`).then((res) => {
      const { data = [] } = res.data || {};
      this.setState({ failFlow: data.datas });
    });
  };

  getFailServe = () => {
    const { hostId } = this.state;
    axios.get(`/aiOps/gateway/errorService/1?dockateId=${hostId}`).then((res) => {
      const { data } = res.data || {};
      this.setState({ failServer: data || {} });
    });
  };

  // 切换节点
  getSelectHostId = (id) => {
    console.log(id);
    this.setState({ hostId: id }, () => {
      this.getFailFlow();
      this.getAppData();
      this.getFailServe();
      this.getFlowTrend();
      this.getFlowInfoTotal();
      this.getNewFlowData();
    });
  };

  // header头部信息
  getFlowInfoTotal = () => {
    const { hostId } = this.state;
    axios.get(`/aiOps/gateway/monitor?dockateId=${hostId}`).then((res) => {
      console.log(res, 'res');
      const { data = {} } = res.data || {};
      this.setState({ flowInfo: data });
    });
  };

  getNewFlowData = () => {
    const { hostId } = this.state;
    axios.get(`/aiOps/gateway/latestService?page=${1}&size=${10000}&dockateId=${hostId}`).then((res) => {
      const { data = {} } = res.data || {};
      console.log(res);
      this.setState({ newFlowData: data.datas });
    });
  };

  render() {
    const {
      flowInfo, appChart, failServer = {}, failFlow, flowTrend = {}, hostId, newFlowData
    } = this.state;

    const flowTrendOptions = {
      title: {
        text: '流量趋势图(最近一天)'
      },
      legend: {
        data: flowTrend.label || []
      },
      xAxis: {
        type: 'category',
        name: '时间',
        data: flowTrend.xrange || []
      },
      yAxis: {
        type: 'value',
        name: '数量'
      },
      series: flowTrend.series || []
    };

    const appChartsOptions = {
      title: {
        text: '应用排行'
      },
      xAxis: {
        type: 'category',
        name: '应用',
        data: appChart.x || [],
        axisTick: {
          alignWithLabel: true
        }
      },
      yAxis: {
        name: '使用次数'
      },
      series: [{
        name: '销量',
        type: 'bar',
        data: appChart.y || [],
        smooth: true
      }]
    };

    const failServerChart = {
      title: {
        text: '失败服务统计(最近一天)'
      },
      xAxis: {
        type: 'category',
        name: '服务',
        data: failServer.x || [],
        axisTick: {
          alignWithLabel: true
        }
      },
      yAxis: {
        type: 'value',
        name: '数量'
      },
      series: [{
        type: 'bar',
        data: failServer.y || [],
        smooth: true
      }]
    };

    // let series = [];
    // if (flowTrend.axis && flowTrend.axis.length > 0) {
    //   console.log(flowTrend.axis, flowTrend.axis.length, 'flowTrend.axis');

    //   flowTrend.axis.forEach((item) => {
    //     series.push({
    //       name: item.appName,
    //       data: item.y,
    //       type: 'line',
    //       smooth: true
    //     });
    //   });
    // } else {
    //   series = [];
    // }

    return (
      <div className="gateway">
        <SelectHost selectChange={this.getSelectHostId} />
        <FlowTotalInfo flowInfo={flowInfo || {}} />
        <div className="charts">
          <Charts chartOptions={appChartsOptions} />
        </div>
        <div className="charts">
          <Charts chartOptions={failServerChart} />
        </div>
        <div className="charts">
          <FailFlowServer failFlow={failFlow} />
        </div>
        <div className="charts">
          <Charts chartOptions={flowTrendOptions} />
        </div>
        <NewFlow data={newFlowData} />
      </div>
    );
  }
}

export default GateWay;
